<!DOCTYPE html>
<html lang="en">
<head>
	<meta content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
	<meta name="apple-mobile-web-app-capable" content="no" />
	<meta charset="UTF-8">
	<title>确认订单</title>
	<style type="text/css">
	</style>
	<script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/mui/js/mui.min.js"></script>
	<link href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/mui/css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/css/sure.css">
	<link rel="stylesheet" type="text/css" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/mui/css/mui.picker.css">
	<link rel="stylesheet" type="text/css" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/mui/css/mui.poppicker.css">
	<link rel="stylesheet" type="text/css" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/sui/css/SUI.css">
	<link rel="stylesheet" type="text/css" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/sui/font/iconfont.css">
    <link rel="stylesheet" type="text/css" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/font/iconfont.css">
</head>
<style type="text/css">
	.suiLineInput{padding-left: 0!important}
	.suiLineInput input{margin: 0;font-size: 14px;}
	.suiLineInput dl{height: 40px !important;padding-right: 0 !important}
	.fp{height: 40px;line-height: 40px;}
	.fp .mui-switch{margin-top: 5px;}
	.orderlist h1{height: 40px;line-height: 40px;font-size: 14px;margin: 0;background:#fff;padding-left: 15px;}
	p.suiTag{margin: 0}
	.orderlist{margin-bottom: 10px}
	#suiTag{margin-bottom: 10px;padding: 0;line-height: 15px;padding-left: 15px;}
	.sure{z-index: 100}
	body{padding-bottom: 61px;}
	.sure-prdbox dl{position: relative;}
	.sure-prdbox dd:nth-of-type(1){width: calc(100% - 130px)}
	.sure-prdbox dd:nth-of-type(2){color:#9c9c9c;}
	.sure-prdbox .num{position: absolute;top: 5px;right: 15px;font-size: 1pc !important;color: #333}
	.allnum{color:#f60;font-size: 12pt}
	.suiLineBox dl dd.right{width: 20px;}
	.end{position:fixed;bottom: 0;left: 0;width: 100%;z-index: 100;background: #fff;height: 50px;border-top: 1px solid #f3f3f3;line-height:50px;}
	.end .sumprice{width: 65%;float: left;text-align: right;padding-right: 10px;font-size: 14px}
	.end .sumprice span{color: #f60;font-size: 18px}
	.end #sure{width: 35%;float: left;text-align: center;background-image: -webkit-linear-gradient(left,#f46f6f,#e54242);color: #fff;font-size: 16px;}
	.noshdz{background: #fff;width: 100vw;height: 100vh}
	.integral{margin-bottom: 10px;padding:0 15px}
	.integral dl dt{padding-left: 15px;}
	#changeaddress .defadd{background:#fff url() -7px bottom repeat-x;background-size: 64px 5px;}
</style>
<body>
	{{if .address}}
	<div id="changeaddress">
		<div class="defadd">
			<dl>
				<dt><span class="fl">{{index .address 0 "name"}}</span> <span class="fr">{{index .address 0 "mobile"}}</span></dt>
				<dd>{{index .address 0 "shen"}} {{index .address 0 "shi"}} {{index .address 0 "qu"}} {{index .address 0 "address"}}</dd>
			</dl>
		</div>
	</div>
	<p class="suiTag">订单信息</p>
	{{range .info}}
	<div class="orderlist" id="{{.gid}}">
		<h1>
			<span class="mui-icon iconfont fs-16">&#xe75f;</span> 
			{{if .name}}
			{{.name}}
			{{else}}
			{{$.system.name}}
			{{end}}
		</h1>
		<div class="sure-prdbox">
			{{range .shopcar}}
			<dl>
				<dt class="suiBgImg" style="background-image: url({{.pathname}});"></dt>
				<dd>{{.title}}</dd>
				<dd>规格:{{.number}}{{.spec}}/箱 <span class="fr">&yen;{{.pricem}}</span></dd>
				<dd class="num">x{{.num}}</dd>
			</dl>
			{{end}}
		</div>
		<div class="suiLineBox notop">
			<dl>
				<dt>发票</dt>
				<dd class="fr fp">
					<div class="mui-switch mui-switch-mini" data-gid="{{.gid}}">
				 	    <div class="mui-switch-handle"></div>
					</div>
				</dd>
			</dl>
			{{if .coupon}}
			<dl class="couponbox">
				<dt>优惠券</dt>
				<dd class="right"></dd>
				<dd class="coupon" data-gid="{{.gid}}">使用优惠券</dd>
			</dl>
			{{end}}
			<div class="suiLineInput noTBorder">
				<dl>
					<dt>备注</dt>
					<dd><input type="text" name='explain' placeholder="说说您的其他想法"></dd>
				</dl>
			</div>
			<dl>
				<dt>总计</dt>
				<dd class="allnum">&yen;{{.pricesum}}</dd>
			</dl>
		</div>	
	</div>
	{{end}}
	<div class="suiLineInput integral">
		<dl>
			<dt>积分</dt>
			<dd id="integral"></dd>
		</dl>
	</div>
	<script type="text/javascript">
		console.log({{.info}})
	</script>
	<p class="suiTag" id="suiTag">支付方式</p>
	<div class="suiLineBox strong notop ccc">
		<dl>
			<img src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/sui/icon/wxpay.png" alt="">
			<dt>微信支付</dt>
			<dd class="chose" event="chose" data-type="2"></dd>
		</dl>
		<dl>
			<img src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/sui/icon/money.png" alt="">
			<dt class="money">余额支付 (&nbsp;&yen;{{.mem.money}}&nbsp;)</dt>
			<dd class="nochose" event="chose" data-type="1"></dd>
		</dl>
		<dl>
			<img src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/sui/icon/alipay.png" alt="">
			<dt>支付宝</dt>
			<dd class="nochose" event="chose" data-type="3"></dd>
		</dl>
	</div>
	<div class="end">
		<div class="sumprice">总计：<span></span></div>
		<div id="sure">确认支付</div>
	</div>
	<style type="text/css">
	.sheet{bottom: 0;animation: sheet 0.2s linear}
	@keyframes sheet
	{
	from {bottom: -60vh}
	to {bottom:0;}
	}
	#mask{width: 100vw;height: 100vh;position: fixed;left: 0;bottom: 0;display: none;z-index: 10000;overflow-y: hidden;background: rgba(0,0,0,0.3)}
	#address{width: 100vw;height: 60vh;position: absolute;left: 0;bottom: 0;z-index: 10010;overflow-y: scroll;}
	#address .choose{position: relative;}
	#address .choose:after{width: 24px;height: 24px;background-image: url('/static/wechat/img/choose.png');content: ' ';position: absolute;right: 20px;top: 25px;background-repeat: no-repeat;background-size: 100%}
	</style>
	<div id="mask">
		<div id="address">
			{{range $k,$v:=.address}}
			<div class="defadd {{if eq $k 0}}choose{{end}}" data-id="{{.id}}">
				<dl>
					<dt><span class="fl">{{$v.name}}</span> <span class="fr">{{$v.mobile}}</span></dt>
					<dd>{{$v.shen}} {{$v.shi}} {{$v.qu}} {{$v.address}}</dd>
				</dl>
			</div>
			{{end}}
		</div>
	</div>
	{{else}}
	<div class="noshdz">
	</div>
	{{end}}
</body>
<script type="text/javascript" src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/sui/js/SUI.js"></script>
<script type="text/javascript" src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/mui/js/mui.picker.js"></script>
<script type="text/javascript" src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/mui/js/mui.poppicker.js"></script>
<script type="text/javascript" src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/js/zepto.min.js"></script>
{{template "wechat/public/share.html" .}}
{{if .address}}
<script type="text/javascript">
	var info={{.info}};
	for(let i=0;i<info.length;i++){
		info[i].invoice="0";
		info[i].yid="0";
	}
	var invoice={{.invoice}}
	var type='2',address='';
	address={{index .address 0 "id"}}
	$('.ccc dl').click(function(){
		$('.ccc dl dd').attr('class','nochose')
		$(this).find('dd').attr('class','chose')
		type=$(this).find('dd').attr('data-type')
	})
	function pricechange(){
		var pricesum=0.00;
		for(let i=0;i<info.length;i++){
			var shopprice;
			var gid=info[i].gid
			if(info[i].invoice=="0"){
				shopprice=info[i].pricesum
			}else{
				shopprice=info[i].pricet
			}
			if(info[i].yid!="0"){
				for(var j=0;j<info[i].coupon.length;j++){
					if(info[i].yid==info[i].coupon[j].id){
						shopprice-=info[i].coupon[j].offer
						break
					}
				}
			}
			$('#'+gid).find('.allnum').html('&yen;'+shopprice)
			pricesum+=parseFloat(shopprice)
		}
		pricesum = pricesum.toFixed(2)
		var integral=parseInt(pricesum/100) 
		$('.end .sumprice span').html('&yen;'+pricesum)
		$('#integral').html(integral)
		// if(info.invoice=="0"){
		// 	shopprice=info.pricesum
		// }else{
		// 	shopprice=info.pricet
		// }
		// if(info.yid!="0"){
		// 	for(var j=0;j<info.coupon.length;j++){
		// 		if(info.yid==info.coupon[j].id){
		// 			shopprice-=info.coupon[j].offer
		// 			break
		// 		}
		// 	}
		// }
		
	}
	pricechange()
	$('#address .defadd').click(function(){
		address=$(this).attr('data-id')
		var html=this.innerHTML
		$('#changeaddress .defadd').html(html)
		$('#address .defadd').attr('class','defadd')
		$(this).attr('class','defadd choose')
		mask.style.display='none'
		maskaddress.className=''
	})
	mui('body').on('tap','.mui-switch-mini',function(){
		var that=this
		if(invoice){	
			var gid=$(this).attr('data-gid')
			for (var i=0;i<info.length;i++){
				if(gid==info[i].gid){
					if(this.classList.contains('mui-active')){
						info[i].invoice="1"
					}else{
						info[i].invoice="0"
					}
					break;
				}
			}
			pricechange()
		}else{
			mui.confirm("您还没有发票信息,前往填写吗?","提示",function(res){
				if(res.index){
					mui.closePopups()
					window.location.href="/mobile/my/invoice"
				}else{
					that.className='mui-switch mui-switch-mini'
				}
			})
		}
	})
	$('.coupon').click(function(){
		var that=$(this)
		var gid=$(this).attr('data-gid')
		var coupon;
		for (var i=0;i<info.length;i++){
			if(gid==info[i].gid){
				coupon=info[i].coupon
				break
			}
		}
		var userPicker = new mui.PopPicker();
		var data=[]
		for(var i=0;i<coupon.length;i++){
			data.push({text:coupon[i].name,value:coupon[i].id})
		}
		userPicker.setData(data);
		userPicker.show(function(items) {
			that.html(items[0].text)
			for (var i=0;i<info.length;i++){
				if(gid==info[i].gid){
					info[i].yid=items[0].value
					break
				}
			}
			pricechange()
		});
	});
	var mask=document.getElementById("mask")
	var maskaddress=document.getElementById("address")
	$('#changeaddress').click(function(){
		mask.style.display='block'
		maskaddress.className='sheet'
	})
	mask.onclick=function(){
		mask.style.display='none'
		maskaddress.className=''
	}
	document.getElementById('sure').addEventListener('click',function(){
		var that=this
		that.disabled=true
		var data={}
		data.type=type
		data.address=address
		var pdate=[]
		for(var i=0;i<info.length;i++){
			var obj={}
			obj.invoice=info[i].invoice
			obj.yid=info[i].yid
			obj.gid=info[i].gid
			var carids=[]
			for(var j=0;j<info[i].shopcar.length;j++){
				carids.push(info[i].shopcar[j].id)
			}
			obj.carid=carids.join(",")
			obj.content=$('#'+info[i].gid).find("input[name='explain']").val()
			pdate.push(obj)
		}
		data.shop=pdate
		// data.content=$('#content').val()
		// var carid=[]
		// for(var i=0;i<info.shopcar.length;i++){
		// 	carid.push(info.shopcar[i].id)
		// }
		// data.carid=carid.join(',')
		// console.log(data)
		// return
		{{if .mem.token}}
		{{if ne .mem.token ""}}
		if(type==1){
			// mui.prompt("请输入您的支付密码!","提示",function(res){
			// 	console.log(res)
			// 	if(res.index){
			// 		if(res.value){
			// 		data.password=res.value
			// 		}else{
			// 			mui.alert("请输入支付密码")
			// 			that.disabled=false;
			// 		}
			// 	}else{
			// 		that.disabled=false;
			// 		return false;
			// 	}
			// })
			// document.querySelector('.mui-popup-input input').type='password' 
					payajax(data);
		}else if(type==3){
			payajax(data);
		}else if(type==2){
			{{if eq .mem.wx_openid_gzh ""}}
			mui.confirm("您还未绑定微信,是否前往绑定?","提示",function(res){
				if(res.index){
					// mui.closePopups()
					window.location.href='/mobile/bind_wechat_oauth'
				}else{
					that.disabled=false;
					return false;
				}
			});
			{{else}}
			payajax(data);
			{{end}}
		};
		{{else}}
		if(type==1){
			// mui.confirm("您还未设置支付密码,是否前往设置?","提示",function(res){
			// 	if(res.index){
			// 		// mui.closePopups()
			// 		window.location.href='/mobile/my/info_safe_changep?type=pay'
			// 	}else{
			// 	}
			// });
					payajax(data);
		}else if(type==3){
			payajax(data);
		}else if(type==2){
			{{if eq .mem.wx_openid_gzh ""}}
			mui.confirm("您还未绑定微信,是否前往绑定?","提示",function(res){
				if(res.index){
					// mui.closePopups()
					window.location.href='/mobile/bind_wechat_oauth'
				}else{
					return false;
				}
			});
			{{else}}
			payajax(data);
			{{end}}
		};
		{{end}}
		{{else}}
		if(type==1){
			// mui.confirm("您还未设置支付密码,是否前往设置?","提示",function(res){
			// 	if(res.index){
			// 		// mui.closePopups()
			// 		window.location.href='/mobile/my/info_safe_changep?type=pay'
			// 	}else{
			// 	}
			// });
					payajax(data);
		}else if(type==3){
			payajax(data);
		}else if(type==2){
			{{if eq .mem.wx_openid_gzh ""}}
			mui.confirm("您还未绑定微信,是否前往绑定?","提示",function(res){
				if(res.index){
					// mui.closePopups()
					window.location.href='/mobile/bind_wechat_oauth'
				}else{
					return false;
				}
			});
			{{else}}
			payajax(data);
			{{end}}
		};
		{{end}}
	})
	function isWeiXin() {
		var ua = window.navigator.userAgent.toLowerCase();
		if (ua.match(/MicroMessenger/i) == 'micromessenger') {
			return true;
		} else {
			return false;
		}
	}
	function payajax(postdata){
		if(isWeiXin()){
		postdata.style=0
		}else{
		postdata.style=1
		}
		document.getElementById('sure').disabled=true;
		var data=JSON.stringify(postdata);
		console.log(data)
		mui.ajax(window.location.href,{
			data:data,
			type:'post',
			success:function(res){
				console.log(res)
				document.getElementById('sure').disabled=false;
				if(res.status==5){
					mui.alert("您已支付过这笔订单",function(){
						// alert(1)
						window.location.href="/mobile/my/order"
					})
					return
				}
				if (res.type==1){
					if (res.status==0){
						mui.alert("支付失败,请重试!","提示")
					}else if(res.status==2){
						mui.confirm("余额不足,是否前往充值?","提示",function(data){
							if(data.index){
								// mui.closePopups()
								window.location.href="/mobile/my/money/recharge"
							}
						})
					}else if(res.status==1){
						window.location.href="/mobile/my/order"
					}else if(res.status==3){
						mui.alert("支付密码错误","提示")
					}
				}else if(res.type==2){
					if (res.status==0){
						mui.alert("支付失败,请重试!","提示")
					}else{
						// alert(postdata.style)
						if(postdata.style==0){
							var payparms=res.res
							if(!payparms.error){
								wx.chooseWXPay({
									timestamp: payparms.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
									nonceStr: payparms.nonceStr, // 支付签名随机串，不长于 32 位
									package: payparms.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
									signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
									paySign: payparms.paySign, // 支付签名
									success: function (res) {
									window.location.href="/mobile/my/order"
									},
									complete:function(res){
										if(res.errMsg == "chooseWXPay:cancel" ) {
									       window.location.href="/mobile/my/order"
										}
									}
								});
							}
						}else{
							window.location.href=res.res
						}
					}
				}else if(res.type==3){
					if (res.status==0){
						mui.alert("支付失败,请重试!","提示")
					}else{
					window.location.href=res.res
					}
				}
			},error:function(){
				mui.alert("支付失败,请重试!","提示")
				
			}
		})
	}
</script>
{{else}}
<script>
	mui.confirm("您还没有收货地址,前往添加吗?","提示",function(res){
		if(res.index){
			mui.closePopups()
			window.location.href="/mobile/my/address_add"
		}else{
			window.location.href=document.referrer
		}
	})
</script>
{{end}}
</html>